<template>
  <div class="personal-settings">
    <div class="settings-header">
      <h4 class="settings-title">个人设置</h4>
    </div>
    
    <div class="settings-content">
      <!-- 字体大小设置 -->
      <div class="setting-item">
        <label class="setting-label">字体大小</label>
        <el-slider
          v-model="fontSize"
          :min="12"
          :max="20"
          :step="1"
          @change="updateFontSize"
          class="font-slider"
        />
        <span class="font-preview" :style="{ fontSize: fontSize + 'px' }">
          预览文字 {{ fontSize }}px
        </span>
      </div>
      
      <!-- 主题设置 -->
      <div class="setting-item">
        <label class="setting-label">主题模式</label>
        <el-radio-group v-model="theme" @change="updateTheme">
          <el-radio label="light">浅色</el-radio>
          <el-radio label="dark">深色</el-radio>
          <el-radio label="auto">跟随系统</el-radio>
        </el-radio-group>
      </div>
      
      <!-- 语音设置 -->
      <div class="setting-item">
        <label class="setting-label">语音播报</label>
        <el-switch
          v-model="voiceEnabled"
          @change="updateVoiceEnabled"
          active-text="开启"
          inactive-text="关闭"
        />
      </div>
      
      <!-- 语音速度 -->
      <div class="setting-item" v-if="voiceEnabled">
        <label class="setting-label">语音速度</label>
        <el-slider
          v-model="voiceSpeed"
          :min="0.5"
          :max="2"
          :step="0.1"
          @change="updateVoiceSpeed"
          class="voice-slider"
        />
        <span class="speed-text">{{ voiceSpeed }}x</span>
      </div>
      
      <!-- 自动保存设置 -->
      <div class="setting-item">
        <label class="setting-label">自动保存会话</label>
        <el-switch
          v-model="autoSave"
          @change="updateAutoSave"
          active-text="开启"
          inactive-text="关闭"
        />
      </div>
      
      <!-- 快捷键提示 -->
      <div class="setting-item">
        <label class="setting-label">快捷键提示</label>
        <el-switch
          v-model="showShortcuts"
          @change="updateShowShortcuts"
          active-text="显示"
          inactive-text="隐藏"
        />
      </div>
    </div>
    
    <!-- 快捷键说明 -->
    <div v-if="showShortcuts" class="shortcuts-info">
      <h5>快捷键说明</h5>
      <ul>
        <li><kbd>Enter</kbd> - 发送消息</li>
        <li><kbd>Ctrl + N</kbd> - 新建会话</li>
        <li><kbd>Ctrl + /</kbd> - 显示/隐藏设置</li>
        <li><kbd>Esc</kbd> - 清空输入框</li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const emit = defineEmits(['settingsChange'])

const fontSize = ref(14)
const theme = ref('light')
const voiceEnabled = ref(false)
const voiceSpeed = ref(1.0)
const autoSave = ref(true)
const showShortcuts = ref(true)

onMounted(() => {
  loadSettings()
})

const loadSettings = () => {
  const settings = localStorage.getItem('user_settings')
  if (settings) {
    const parsed = JSON.parse(settings)
    fontSize.value = parsed.fontSize || 14
    theme.value = parsed.theme || 'light'
    voiceEnabled.value = parsed.voiceEnabled || false
    voiceSpeed.value = parsed.voiceSpeed || 1.0
    autoSave.value = parsed.autoSave !== false
    showShortcuts.value = parsed.showShortcuts !== false
  }
  applySettings()
}

const saveSettings = () => {
  const settings = {
    fontSize: fontSize.value,
    theme: theme.value,
    voiceEnabled: voiceEnabled.value,
    voiceSpeed: voiceSpeed.value,
    autoSave: autoSave.value,
    showShortcuts: showShortcuts.value
  }
  localStorage.setItem('user_settings', JSON.stringify(settings))
  emit('settingsChange', settings)
}

const applySettings = () => {
  // 应用字体大小
  document.documentElement.style.setProperty('--chat-font-size', fontSize.value + 'px')
  
  // 应用主题
  if (theme.value === 'dark') {
    document.documentElement.classList.add('dark-theme')
  } else {
    document.documentElement.classList.remove('dark-theme')
  }
}

const updateFontSize = () => {
  applySettings()
  saveSettings()
}

const updateTheme = () => {
  applySettings()
  saveSettings()
}

const updateVoiceEnabled = () => {
  saveSettings()
}

const updateVoiceSpeed = () => {
  saveSettings()
}

const updateAutoSave = () => {
  saveSettings()
}

const updateShowShortcuts = () => {
  saveSettings()
}

// 暴露设置给父组件
defineExpose({
  getSettings: () => ({
    fontSize: fontSize.value,
    theme: theme.value,
    voiceEnabled: voiceEnabled.value,
    voiceSpeed: voiceSpeed.value,
    autoSave: autoSave.value,
    showShortcuts: showShortcuts.value
  })
})
</script>

<style scoped>
.personal-settings {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.settings-header {
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(224, 224, 224, 0.5);
}

.settings-title {
  margin: 0;
  color: #1976D2;
  font-size: 16px;
  font-weight: 600;
}

.settings-content {
  flex: 1;
  overflow-y: auto;
}

.setting-item {
  margin-bottom: 20px;
  padding: 15px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 6px;
  backdrop-filter: blur(5px);
}

.setting-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #333;
  font-size: 14px;
}

.font-slider,
.voice-slider {
  margin-bottom: 8px;
}

.font-preview {
  color: #666;
  font-weight: 500;
}

.speed-text {
  color: #666;
  font-size: 12px;
  margin-left: 8px;
}

.shortcuts-info {
  margin-top: 20px;
  padding: 15px;
  background-color: rgba(76, 175, 80, 0.1);
  border-radius: 6px;
  border-left: 3px solid #4CAF50;
}

.shortcuts-info h5 {
  margin: 0 0 10px 0;
  color: #4CAF50;
  font-size: 14px;
}

.shortcuts-info ul {
  margin: 0;
  padding-left: 20px;
}

.shortcuts-info li {
  margin-bottom: 5px;
  font-size: 13px;
  color: #333;
}

kbd {
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 2px 4px;
  font-size: 11px;
  font-family: monospace;
}

@media (max-width: 768px) {
  .setting-item {
    padding: 12px;
    margin-bottom: 15px;
  }
  
  .setting-label {
    font-size: 13px;
  }
}

/* 深色主题样式 */
:global(.dark-theme) .setting-item {
  background-color: rgba(50, 50, 50, 0.8);
  color: #fff;
}

:global(.dark-theme) .setting-label {
  color: #fff;
}

:global(.dark-theme) .shortcuts-info {
  background-color: rgba(76, 175, 80, 0.2);
}
</style>